<template>
  <div class="card-purple">
    <div class="card-purple-bar douyu" :class="titlename">{{ name }}</div>
    <div class="card-purple-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup name="CardPurple">
import { computed } from "vue";

const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  theme: {
    type: String,
    default: "purple",
  },
});

const titlename = computed(() => {
  return props.theme;
});
</script>

<style lang="scss" scoped>
.card-purple {
  width: 100%;
  height: 100%;

  .card-purple-bar {
    box-sizing: border-box;
    padding-left: 34px;
    height: 30px;
    line-height: 36px;
    text-align: center;
    color: #fff;

    font-size: 16px;
    color: #ffffff;
    text-align: left;
    &.purple {
      background: url("../assets/image/versionOne/card_purple_titbg.png") left
        center no-repeat;
      background-size: contain;
    }
    &.blue {
      background: url("../assets/image/posture/card_blue_titbg.png") left center
        no-repeat;
      background-size: contain;
    }
  }
  .card-purple-content {
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
    padding-right: 0;
    height: calc(100% - 30px);
  }
}
</style>
